<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单爱心动画</title>
  <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #fce4ec;
            transition: background-color 0.5s ease;
        }

        /* 爱心形状 */
        .heart {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #ff3864;
            transform: rotate(45deg);
            cursor: pointer;
            animation: heartbeat 1.5s ease-in-out infinite;
            box-shadow: 0 0 20px rgba(255, 56, 100, 0.5);
            transition: transform 0.3s ease;
        }

        .heart:before,
        .heart:after {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #ff3864;
            border-radius: 50%;
        }

        .heart:before {
            top: -50px;
            left: 0;
        }

        .heart:after {
            top: 0;
            left: -50px;
        }

        /* 爱心跳动动画 */
        @keyframes heartbeat {
            0% {
                transform: rotate(45deg) scale(1);
                box-shadow: 0 0 20px rgba(255, 56, 100, 0.5);
            }
            15% {
                transform: rotate(45deg) scale(1.15);
                box-shadow: 0 0 30px rgba(255, 56, 100, 0.7);
            }
            30% {
                transform: rotate(45deg) scale(1);
                box-shadow: 0 0 20px rgba(255, 56, 100, 0.5);
            }
            45% {
                transform: rotate(45deg) scale(1.15);
                box-shadow: 0 0 30px rgba(255, 56, 100, 0.7);
            }
            60% {
                transform: rotate(45deg) scale(1);
                box-shadow: 0 0 20px rgba(255, 56, 100, 0.5);
            }
            100% {
                transform: rotate(45deg) scale(1);
                box-shadow: 0 0 20px rgba(255, 56, 100, 0.5);
            }
        }

        /* 点击效果 */
        .heart:active {
            transform: rotate(45deg) scale(0.95);
        }

        /* 点击时的粒子效果 */
        .particle {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #ff3864;
            border-radius: 50%;
            pointer-events: none;
        }
    </style>
</head>
<body>
<div class="heart" id="heart"></div>

<script>
        const heart = document.getElementById('heart');
        const body = document.body;

        // 点击爱心时的效果
        heart.addEventListener('click', function(e) {
            // 创建粒子效果
            createParticles(e.clientX, e.clientY);

            // 随机改变背景色
            const colors = [
                '#fce4ec', // 浅粉色
                '#fff3e0', // 浅橙色
                '#e8f5e9', // 浅绿色
                '#e3f2fd', // 浅蓝色
                '#f3e5f5'  // 浅紫色
            ];

            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            body.style.backgroundColor = randomColor;

            // 改变爱心颜色
            const heartColors = [
                '#ff3864', // 红色
                '#ff6b8b', // 粉色
                '#ff9aa2', // 浅粉色
                '#ff4d6d', // 亮红色
                '#c70039'  // 深红色
            ];

            const randomHeartColor = heartColors[Math.floor(Math.random() * heartColors.length)];
            heart.style.backgroundColor = randomHeartColor;
            heart.style.boxShadow = `0 0 20px ${randomHeartColor}80`;

            // 更新伪元素颜色
            const style = document.createElement('style');
            style.textContent = `
                .heart:before,
                .heart:after {
                    background-color: ${randomHeartColor};
                }
            `;
            document.head.appendChild(style);

            // 添加脉动效果
            heart.style.animation = 'none';
            setTimeout(() => {
                heart.style.animation = 'heartbeat 1.5s ease-in-out infinite';
            }, 10);
        });

        // 创建粒子效果
        function createParticles(x, y) {
            const particleCount = 10;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';

                // 设置粒子初始位置
                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;

                // 设置随机颜色
                const colors = [
                    '#ff3864',
                    '#ff6b8b',
                    '#ff9aa2',
                    '#ffb7b2',
                    '#ffdac1'
                ];
                particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

                // 添加到页面
                document.body.appendChild(particle);

                // 粒子动画
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 50 + 20;
                const duration = Math.random() * 0.5 + 0.5;

                const targetX = x + Math.cos(angle) * distance;
                const targetY = y + Math.sin(angle) * distance;

                particle.animate([
                    { transform: 'scale(0)', opacity: 1 },
                    { transform: 'scale(1)', opacity: 1 },
                    { transform: 'scale(0)', opacity: 0 }
                ], {
                    duration: duration * 1000,
                    easing: 'ease-out'
                });

                particle.animate([
                    { left: `${x}px`, top: `${y}px` },
                    { left: `${targetX}px`, top: `${targetY}px` }
                ], {
                    duration: duration * 1000,
                    easing: 'ease-out',
                    fill: 'forwards'
                });

                // 动画结束后移除粒子
                setTimeout(() => {
                    particle.remove();
                }, duration * 1000);
            }
        }
    </script>
</body>
</html>
